$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      display: block;
      object-fit: cover;
      max-height: 100vh;
    }

    .text {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      transform: translateY(-50%);
      font-size: $fontSize_64;
      color: white;
      font-weight: 600;
      text-transform: uppercase;
      font-style: italic;
    }
  }

}
.sec1{
  padding: 55/$f+vw 0 148/$f+vw 0;
  .title{
    color: #454545;
    font-size: 29/$f+vw;
    font-weight: 600;
    line-height: 34/$f+vw;
    text-transform: uppercase;
    text-align: center;
  }

  .text{
    max-width: 780/$f+vw;
    color: #454545;
    text-align: center;
    font-size: 16/$f+vw;
    font-weight: 400;
    line-height: 23.4/$f+vw; /* 146.25% */
    margin: 66/$f+vw auto 116/$f+vw;
  }
  .content{
    .position{
      width: 1180/$f+vw;
      height: 511/$f+vw;
      max-width: 90%;
      position: relative;
      margin: 84/$f+vw auto 0 ;
      .img{
        position: absolute;
        img{
          width: 100%;
          height: 100%;
        }
        &.img1{
          top: 37/$f+vw;
          left: 0;
          z-index: 5;
          width: 252/$f+vw;
          height: 178/$f+vw;
        }
        &.img2{
          top: 123/$f+vw;
          left: 90/$f+vw;
          width: 458/$f+vw;
          height: 339/$f+vw;
        }
        &.img3{
          top: 0;
          left: 571/$f+vw;
          width: 395/$f+vw;
          height: 235/$f+vw;
        }
        &.img4{
          top: 262/$f+vw;
          left: 571/$f+vw;
          width: 171/$f+vw;
          height: 248/$f+vw
        }
        &.img5{
          top: 262/$f+vw;
          left: 769/$f+vw;
          z-index: 4;
          width: 307/$f+vw;
          height: 188/$f+vw;
        }
        &.img6{
          top: 135/$f+vw;
          right: 0;
          z-index: 3;
          width: 263/$f+vw;
          height: 174/$f+vw;
        }
      }
    }
  }
}

.sec2{
  .wrap{
    width: 1188/$f+vw;
    margin: 0 auto 39/$f+vw;
    .title{
      text-align: center;
      color: #454545;
      font-size: 30/$f+vw;
      font-weight: 600;
      line-height: 34/$f+vw; /* 113.333% */
      text-transform: uppercase;
      margin: 0 0 87/$f+vw;
    }
    .content{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-gap: 94/$f+vw 18/$f+vw;
      .item{
        width: 100%;
        cursor: pointer;
        .img{
          width: 100%;
          height: 383/$f+vw;
          overflow: hidden;
          margin: 0 0 16/$f+vw;
          img{
            width: 100%;
            height: 100%;
            transition: 600ms;
          }
        }
        .text{
          text-align: center;
          h1{
            color: #151C24;
            font-size: 32/$f+vw;
            font-weight: 600;
            line-height: 40/$f+vw; /* 125% */
            margin: 0;
          }
          p{
            color: rgba(21, 28, 36,0.4);
            font-size: 18/$f+vw;
            font-weight: 600;
            line-height: 28/$f+vw; /* 155.556% */
          }
        }
        &:hover{
          .img{
            img{
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }
}

.sec3{
  .wrap{
    width: 738/$f+vw;
    margin: 100/$f+vw auto 123/$f+vw;
    .text{
      color: #454545;
      text-align: center;
      font-size: 16/$f+vw;
      font-weight: 400;
      line-height: 23.4/$f+vw; /* 146.25% */
      margin: 0 0 50/$f+vw;
    }
    .red_more{
      width: fit-content;
      padding: 0 28/$f+vw;
      height: 51/$f+vw;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      svg{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
      }
      p{
        color: #FFF;
        text-align: center;
        font-size: 18/$f+vw;
        font-weight: 400;
        text-transform: uppercase;
      }
    }
    .content{
      margin: 136/$f+vw 0 0 0;
      .title{
        color: #454545;
        font-size: 64/$f+vw;
        font-weight: 600;
        line-height: 64.8/$f+vw; /* 101.25% */
        text-align: center;
        margin: 0 0 47/$f+vw;
        text-transform: uppercase;
      }
    }
  }
}

@media screen and (max-width: 1024px) {

  .sec1{
    padding: 30px 5% 60px 5%;
  }
  .sec1 .title{
    font-size: 18px;
    line-height: 1.5;
  }
  .sec1 .text{
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.6;
    margin: 30px 0 60px 0;
  }
  .sec1 .content .position{
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .sec1 .content .position .img{
    position: static;
    width: 100% !important;
    height: auto!important;
    margin: 0 0 20px;
  }
  .sec2 .wrap .title{
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 20px;
  }
  .sec2 .wrap .title br{
    display: none;
  }
  .sec2 .wrap{
    width: 90%;
    margin: 0 auto 25px;
  }
  .sec2 .wrap .content{
    grid-template-columns: repeat(1,1fr);
    grid-gap: 35px 0;
  }
  .sec2 .wrap .content .item .img{
    height: auto;
    margin: 0 0 20px;
  }
  .sec2 .wrap .content .item .text h1{
    font-size: 18px;
    line-height: 1;
    margin: 0 0 10px;
  }
  .sec2 .wrap .content .item .text p{
    font-size: 14px;
    line-height: 1;
  }
  .sec3 .wrap{
    width: 90%;
    margin: 50px auto;
  }
  .sec3 .wrap .text{
    font-size: 14px;
    line-height: 1.6;
  }
  .sec3 .wrap .text br{
    display: none;
  }
  .sec3 .wrap .red_more{
    height: 50px;
    padding: 0 20px;
  }
  .sec3 .wrap .red_more p{
    font-size: 14px;
  }
}